package cn.com.chenmin.views.editor;

import com.vaadin.flow.component.html.*;
import com.vaadin.flow.component.html.DescriptionList.Description;
import com.vaadin.flow.component.html.DescriptionList.Term;
import com.vaadin.flow.component.richtexteditor.RichTextEditor;
import com.vaadin.flow.component.richtexteditor.RichTextEditorVariant;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import cn.com.chenmin.views.MainLayout;
import javax.annotation.security.RolesAllowed;

@PageTitle("Editor")
@Route(value = "editor", layout = MainLayout.class)
@RolesAllowed("user")
public class EditorView extends Main {

    public EditorView() {
        addClassNames("flex", "flex-grow", "h-full");

        // Editor
        RichTextEditor editor = new RichTextEditor();
        editor.addClassNames("border-r", "border-contrast-10", "flex-grow");
        editor.addThemeVariants(RichTextEditorVariant.LUMO_NO_BORDER);
        editor.setValue(
                "[{\"insert\":\"High quality rich text editor for the web\"},{\"attributes\":{\"header\":2},\"insert\":\"\\n\"},{\"insert\":\"<vaadin-rich-text-editor> is a Web Component providing rich text editor functionality, part of the \"},{\"attributes\":{\"link\":\"https://vaadin.com/components\"},\"insert\":\"Vaadin components\"},{\"insert\":\".\\nIt handles the following formatting:\\n\"},{\"attributes\":{\"bold\":true},\"insert\":\"Bold\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"attributes\":{\"italic\":true},\"insert\":\"Italic\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"attributes\":{\"underline\":true},\"insert\":\"Underline\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"attributes\":{\"strike\":true},\"insert\":\"Strike-through\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"Headings (H1, H2, H3)\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"Lists (ordered and unordered)\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"Text align (left, center, right)\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"attributes\":{\"script\":\"sub\"},\"insert\":\"Sub\"},{\"insert\":\"script and \"},{\"attributes\":{\"script\":\"super\"},\"insert\":\"super\"},{\"insert\":\"script\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"attributes\":{\"link\":\"https://vaadin.com\"},\"insert\":\"Hyperlink\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"In addition to text formatting, additional content blocks can be added.\\nImages\"},{\"attributes\":{\"header\":3},\"insert\":\"\\n\"},{\"insert\":{\"image\":\"\"}},{\"insert\":\"\\nBlockquotes\"},{\"attributes\":{\"header\":3},\"insert\":\"\\n\"},{\"insert\":\"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"},{\"attributes\":{\"blockquote\":true},\"insert\":\"\\n\"},{\"insert\":\"Code blocks\"},{\"attributes\":{\"header\":3},\"insert\":\"\\n\"},{\"insert\":\"<body>\"},{\"attributes\":{\"code-block\":true},\"insert\":\"\\n\"},{\"insert\":\"  <vaadin-rich-text-editor></vaadin-rich-text-editor>\"},{\"attributes\":{\"code-block\":true},\"insert\":\"\\n\"},{\"insert\":\"</body>\"},{\"attributes\":{\"code-block\":true},\"insert\":\"\\n\"},{\"insert\":\"\\n\"}]");

        // Sidebar
        add(editor, createSidebar());
    }

    private Section createSidebar() {
        Section sidebar = new Section();
        sidebar.addClassNames("bg-contrast-5", "box-border", "flex", "flex-col", "flex-shrink-0", "overflow-auto",
                "p-l");
        sidebar.setWidth("256px");

        H2 title = new H2("Project details");
        title.addClassName("sr-only"); // Only shown for screen readers

        DescriptionList dl = new DescriptionList();
        dl.addClassNames("flex", "flex-col", "gap-l", "mb-s", "mt-0", "text-s");

        dl.add(createItem("Owner", "My Name"), createItem("Created", "2021-08-14 14:48"),
                createItem("Last modified", "2021-08-14 14:50"), createBadgeItem("Status", "Draft"));

        Select select = new Select("Project");
        select.setLabel("Project");
        select.setItems("My Project", "Your Project", "Their Project");
        select.setValue("My Project");

        // Add it all together
        sidebar.add(title, dl, select);
        return sidebar;
    }

    private Div createItem(String label, String value) {
        return new Div(createTerm(label), createDescription(value));
    }

    private Div createBadgeItem(String label, String value) {
        return new Div(createTerm(label), createDescription(value, "badge"));
    }

    private Term createTerm(String label) {
        Term term = new Term(label);
        term.addClassNames("font-medium", "text-secondary");
        return term;
    }

    private Description createDescription(String value, String... themeNames) {
        Description desc = new Description(value);
        desc.addClassName("ml-0");
        for (String themeName : themeNames) {
            desc.getElement().getThemeList().add(themeName);
        }
        return desc;
    }
}
